<template>
  <div class="home">
    <div class="head_title">
      <div class="logo_box">
        <img class="logo" src="@/assets/img/logo.png" alt="" />
        <div class="title">
          <span class="title_bg"> 中国建筑装饰协会 </span>
          <span class="title_sm"> 会员查询系统 </span>
        </div>
      </div>
    </div>
    <div class="content_box">
      <div class="forget_paw">
        <div class="title">管理系统登录</div>
        <div>
          <el-form
            :model="ruleForm"
            status-icon
            ref="ruleFormRef"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item
              :rules="[{ required: true, message: '用户名不能为空' }]"
              label="用户名:"
              prop="account"
            >
              <el-input
                v-model="ruleForm.account"
                placeholder="请输入用户名"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="密码:"
              prop="passWord"
              :rules="[{ required: true, message: '密码不能为空' }]"
            >
              <el-input
                placeholder="请输入密码"
                type="password"
                v-model="ruleForm.passWord"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <el-button type="primary" @click="handSub">登 录</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from "vue";
import { useRouter } from "vue-router";
import { login } from "@/utils/apis";
export default defineComponent({
  name: "Home",
  setup() {
    const ruleFormRef: any = ref(null);
    const router = useRouter();
    const state = reactive({
      ruleForm: {
        account: "",
        passWord: "",
      },
      input: "",
    });
    const handSub = () => {
      ruleFormRef.value.validate((valid: any) => {
        if (valid) {
          login(state.ruleForm).then((res) => {
            localStorage.setItem("token", res.data);
            if (localStorage.getItem("token")) {
              router.push("tebaleAdmin");
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    };
    return { ...toRefs(state), handSub, ruleFormRef };
  },
});
</script>
<style  lang="scss" scope>
.content_box {
  height: 100%;
  width: 100%;
  background-color: #2b83c0;
  min-height: calc(100vh - 210px);
  padding-top: 50px;
}
.head_title {
  background: linear-gradient(
    to bottom,
    rgba(117, 189, 209, 1) 0%,
    rgba(39, 124, 184, 1) 95%,
    rgba(39, 124, 184, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#75bdd1', endColorstr='#277cb8', GradientType=0 );
  height: 210px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .logo_box {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    .logo {
      width: 80px;
      height: 80px;
      margin-right: 20px;
    }
    .title {
      color: #fff;
      .title_bg {
        font-size: 60px;
        font-weight: 600;
      }
      .title_sm {
        font-size: 30px;
      }
    }
  }
}
</style>
